<template>
  <PageContainer>
    <view class="container">
      <Header title="个人资料" />
      <UploadAvatar v-model="avatarUrl" :customStyle="{ marginBottom: '50rpx' }" />
      <BasicsForm @register="formRegister" @submit="formSubmit" />
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* editMyProfile 编辑个人资料 */
  import PageContainer from '@/components/PageContainer/index.vue';
  import Header from '@/components/Header/index.vue';
  import BasicsForm from '@/components/Form/BasicsForm.vue';
  import { type FormSchema, useForm } from '@/components/Form';
  import { ref, unref } from 'vue';
  import { getMemberData, upMemberData } from '@/api/mine';
  import { onLoad, navigateBack } from '@/router';
  import { logManager } from '@/utils/log';
  import { useUserStoreWithOut } from '@/store/modules/user';
  import UploadAvatar from '@/components/PerfectInfoDialog/UploadAvatar.vue';
  import type { IUserInfo } from '@/api/login/types';
  import type { FunctionArgs } from '@vueuse/core';
  import { SexEnum } from '@/enums/loginEnum';
  import { IsInternalInterfaceEnum } from '@/enums/formEnum';
  import { isArray, isObject } from 'lodash-es';
  import { isJSON } from '@/utils/is';

  let success: FunctionArgs;
  onLoad<'editMyProfile'>((op) => {
    success = op.success;
  });

  const useUser = useUserStoreWithOut();
  const formSchemas = ref<FormSchema[]>([
    {
      field: 'name',
      label: '姓名',
      component: 'Nickname',
      required: true,
      componentProps: {
        maxlength: 12,
      },
    },
    {
      field: 'phone',
      label: '手机号码',
      component: 'InputPhone',
      required: true,
      dynamicDisabled: true,
    },
    {
      field: 'sex',
      label: '性别',
      component: 'RadioGroup',
      required: true,
      defaultValue: SexEnum.MALE,
      componentProps: {
        localdata: [
          { text: '男', value: SexEnum.MALE },
          { text: '女', value: SexEnum.FEMALE },
        ],
      },
    },
    // {
    //   field: 'birthday',
    //   label: '生日',
    //   component: 'DatePicker',
    //   required: false,
    // },
    {
      field: 'email',
      label: '邮箱',
      component: 'Input',
      required: false,
    },
    {
      field: 'wechatId',
      label: '微信号',
      component: 'Input',
      required: false,
    },
    {
      field: 'nativePlace',
      label: '籍贯',
      component: 'AreaPicker',
      required: false,
    },
    {
      field: 'schoolName',
      label: '毕业院校',
      component: 'InputSearch',
      isInternalInterface: IsInternalInterfaceEnum.SCHOOL,
    },
    {
      field: 'resource',
      label: '可提供资源',
      component: 'InputTextArea',
      componentProps: {
        placeholder: '可以介绍自己能提供的资源、产品或服务等等~',
      },
    },
    {
      field: 'demand',
      label: '需求资源',
      component: 'InputTextArea',
      componentProps: {
        placeholder: '可以说说自己的需求~',
      },
    },
  ]);

  const [register, { setFieldsValue }] = useForm({
    labelAlign: 'left',
    validateTrigger: 'submit',
    labelWidth: 100,
    schemas: formSchemas,
    btnGroupOptions: { placeholder: true, submit: { text: '保存' } },
  });

  function formRegister(event: any) {
    register(event);
    getInformation();
  }

  const avatarUrl = ref('');

  async function getInformation() {
    const res = await getMemberData();
    avatarUrl.value = res.avatar;
    let values: Recordable = {};
    for (let i = 0; i < formSchemas.value.length; i++) {
      const item = formSchemas.value[i];
      const key = item.field as keyof IUserInfo;
      values[key] = res[key];
    }

    setFieldsValue(values);
  }

  async function formSubmit(e: any) {
    // if (!unref(avatarUrl)) return Toast('请选择头像');
    if (isArray(e['schoolName']) && e['schoolName'][0]) {
      const item = isJSON(e['schoolName'][0]);
      delete e['schoolName'];
      item && (e['schoolCode'] = item.id);
    }
    try {
      await upMemberData({ avatar: unref(avatarUrl), ...e });
      await useUser.setUserInfo();
      success?.();
      navigateBack();
    } catch (error) {
      logManager.error(error);
    }
  }
</script>
<style lang="scss" scoped>
  .container {
    padding-top: 30rpx;
    background-color: #fff;
  }
</style>
